<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大事件-后台首页</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <!-- 导入bootstrap的js文件 -->
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <!-- 导入通用ajax请求 -->
    <script src="js/login.js"></script>
</head>

<body>
    <div class="sider">
        <a href="#" class="logo"><img src="./images/logo02.png" alt="logo"></a>
        <div class="user_info">
            <!-- 用户头像和名称 -->
            <img class="userPic" src="http://localhost:8080/icon.jpg" alt="person">
            <span>欢迎&nbsp;&nbsp;<i class="userName">李思思</i></span>
            <b>管理员</b>
        </div>
        <!-- 左侧导航栏 -->
        <div class="menu">
            <div class="level01 active">
                <a href="./main_count.html" target="iframe"><i
                        class="iconfont icon-yidiandiantubiao04"></i><span>首页</span></a></div>
            <div class="level01 l2"><a href="#"><i class="iconfont icon-icon-article"></i><span>文章管理</span>
                <b class="iconfont icon-arrowdownl"></b></a>
            </div>
            <ul class="level02">
                <li><a href="./article_list.html" target="iframe"><i class="iconfont icon-previewright"></i><span>文章列表</span></a></li>
                <li><a href="./article_add.html" target="iframe"><i class="iconfont icon-previewright"></i><span>发表文章</span></a></li>
                <li><a href="./article_category.html" target="iframe"><i class="iconfont icon-previewright"></i><span>文章类别管理</span></a>
                </li>
            </ul>

            <div class="level01"><a href="./commen_tlist.html" target="iframe"><i class="iconfont icon-comment"></i><span>评论管理</span></a></div>

            <div class="level01" id="user"><a href="./user.html" target="iframe"><i
                        class="iconfont icon-user"></i><span>个人中心</span></a></div>
        </div>
        <!-- 顶部栏 -->
        <div class="header_bar">
            <div class="user_center_link">
                <a href="./user.html">个人中心</a>
                <!-- 用户头像 -->
                <img class="userPic" src="http://localhost:8080/icon.jpg" alt="person">
                <a href="javascript:void(0)" class="logout"><i class="iconfont icon-tuichu"></i> 退出</a>
            </div>
        </div>
        <!-- 右侧主体内容 -->
        <div class="main" id="main_body">
            <iframe src="./main_count.html" frameborder="0" style="width: 100%;height:100%;" name="iframe"></iframe>
        </div>
    </div>

    <script>
        //入口函数
        $(function() {
                // // 1.0 处理用户点击菜单以后实现背景色改变
                set_menu_bgcolor();
                //当用户点击文章管理一级菜单的时候展开二级菜单，同时将他右边的箭头改成向下的状态
                spread_memu()
                    //  调用获取用户信息的方法
                get_userInfo();
            })
            // 处理用户点击菜单以后实现背景色改变 
        function set_menu_bgcolor() {
            // 给所有菜单绑定点击事件
            $('.menu>.level01,.menu>.level02>li').click(function() {
                $(this).addClass('active').siblings().removeClass('active')
            })
        }

        //当用户点击文章管理一级菜单的时候展开二级菜单，同时将他右边的箭头改成向下的状态
        function spread_memu() {
            //点击以后改变箭头的显示状态
            // let dep = 90
            $('.level01.l2').click(function() {
                //将二级菜单进行展开和隐藏操作 toggle动画效果不你不明显,都是显示隐藏
                $(this).siblings('.level02').slideToggle()
                    //改变箭头的角度 通过动画更改箭头的样式来实现
                let $b_obj = $(this).find('b') //这个jq方法是找出正在处理的元素的后代元素的好方法。就是找出$('.level01.l2')里的b标签

                // $b_obj.css('transform', 'rotate(0deg)')//这样直接写死了 可以通过开关思想进行判断处理或在写一个样式通过动态添加类名方法实现
                /* if (dep == 0) {
                    需要事件函数外定义判断条件的变量
                    bobj.css('transform', 'rotate(-90deg)');
                    dep = 90;
                } else {
                    bobj.css('transform', 'rotate(0deg)');
                    dep = 0;
                } */
                $b_obj.toggleClass('rotate0')
            })
        }

        //获取用户信息的方法 更新到对应位置
        function get_userInfo() {
            myAjax('get', '/admin/user/info', null, function(resData) {
                // 将数据填充到页面指定的元素中
                $('.userPic').prop('src', resData.data.userPic);
                $('.userName').html(resData.data.nickname)

            })
        }
    </script>
</body>

</html>